<template>
  <div class="cooperation-list">
    <div class="flex-box">
      <div class="flex-grow-0" style="width: 130px">
        <p>项目成员</p>
        <p>总联系人数</p>
        <p>推荐人数</p>
        <p>已offer</p>
      </div>
      <div class="flex-item">
        <p style="color:#4c9de7">{{data.memberNum}}</p>
        <p style="color:#4c9de7">{{data.contactNum}}</p>
        <p style="color:#4c9de7">{{data.recommendNum}}</p>
        <p style="color:#4c9de7">{{data.offerNum}}</p>
      </div>
      <div class="flex-grow-0 t-right" style="width: 140px;">
        <ui-button type="lightblue" size="mini" @click="doManage">配置项目成员</ui-button>
      </div>
    </div>
    <m-memberAdmin :visible.sync="memberAdminVisible"></m-memberAdmin>
  </div>
</template>

<script>
import MemberAdmin from '../memberAdmin'
  export default {
    components: {
      'm-memberAdmin': MemberAdmin
    },
    props: ['data'],
    data () {
      return {
        memberAdminVisible: false
      }
    },
    methods: {
      doManage() {
        this.memberAdminVisible = true
      }
    },
  }
</script>

<style lang="scss">
  .cooperation-list{
    width: 600px;
    max-width: 100%;
    .flex-box{
      flex-direction: row,
    }
    p{
      display:block;
      line-height: 22px;
      margin: 10px 0;
      color: #acacac;
    }
  }
</style>
